<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue全局过滤器</title>
</head>
<body>
  <div id="app">
    <p>{{ message }}</p>
    <p>{{ message | msgFormat }}</p>
    <p>{{ message | msgFormat2('单纯', '邪恶2222') }}</p>
    <h3>管道的串联,过个管道可以一起使用，注意是串联</h3>
    <p>{{ message | msgFormat2('单纯', '邪恶2222') | subFormat }}</p>
    <h3>局部过滤器</h3>
    <img :src="imgSrc | srcFormat" alt="">
    <h2>时间格式化：</h2>
    <p>{{ dateTime }}</p>
    <p>{{ dateTime | dateFormat }}</p>
    <p>{{ dateTime | dateFormat('yyyy-mm-dd') }}</p>
    <p>{{ dateTime | dateFormat('YYYY-MM-DD') }}</p>
  </div>
  <hr />
  <div id="app2">
    <p>{{ message }}</p>
    <p>{{ message | msgFormat }}</p>
    <!-- <h3>局部过滤器</h3>
    <img :src="imgSrc | srcFormat" alt=""> -->
  </div>
</body>
<script src="./src/vue.js"></script>
<script>
  // 1. 全局过滤器
  // 通过类方法 Vue.filter() 来实现全局过滤器
  // 这样实现的过滤器，每一个Vue的实例对象都可以使用这个过滤器
  Vue.filter('msgFormat', function(msg){
    // return msg.replace('单纯', '疯狂');
    // 为了能全局替换使用 正则表达式
    return msg.replace(/单纯/g, '疯狂+1');
  });
  // msgFormat2(msg, 'text1', 'text2')
  Vue.filter('msgFormat2', function(msg, src, des){
    let myRE = new RegExp(src, 'g');
    return msg.replace(myRE, des);
  });
  // 实现管道的串联
  Vue.filter('subFormat', function(text){
    return text + '===============';
  });

  const vm = new Vue({
    el: '#app',
    data: {
      message: '曾经，我也是一个单纯的少年，单纯的我，问，谁才是世界上最单纯的男人。',
      imgSrc: 'logo.png',
      dateTime: '2022-01-14T11:13:20.001z'
    },
    // 定义一个局部过滤器
    filters: {
      srcFormat(text) {
        return './images/' + text; //./images/
      },
      // 时间过滤器 对指定时间进行格式化
      dateFormat(dateSrc, pattern = ""){
        // 1. 对传入的时间字符串进行 时间对象转化
        let dt = new Date(dateSrc);
        // 2. 格式化时间   'yyyy-mm-dd'
        let year = dt.getFullYear();
        let month = dt.getMonth() + 1;
        let date = dt.getDate();
        // 3.控制时间输出的格式
        if (pattern.toLowerCase() === 'yyyy-mm-dd') {
          // 如果当前过滤器的参数写的是 yyyy-mm-dd 那就按照yyyy-mm-dd的格式输出
          return `${year}-${month}-${date}`;
        } else {
          // 否则（没有写参数），在后面把时分秒补上 时：分：秒
          let hh = dt.getHours();
          let mm = dt.getMinutes();
          let ss = dt.getSeconds();
          // 格式化输出
          return `${year}-${month}-${date} ${hh}:${mm}:${ss}`;
        }

      }
    }
  });
  const vm2 = new Vue({
    el: '#app2',
    data: {
      message: '曾经，我也是一个单纯的少年，单纯的我，问，谁才是世界上最单纯的男人。'
    }
  })
</script>
</html>